<!DOCTYPE html>
<html>
<head>
    <%
    var title = "身份证上传";
    %>
    <% include common/meta.ejs %>
    <title>用户<%= title %></title>
    <% include common/public.ejs %>
</head>
<body ontouchstart>
<form id="editForm">
    <input type="hidden" name="id" value="<%= data.id %>"/>
    <div class="weui_cells_title">证件上传</div>
    <div class="weui_uploader" style="margin: 0.5rem;">
        <div class="weui_uploader_bd">
            <ul class="weui_uploader_files" id="weui_uploader_files">
            </ul>
            <div class="weui_uploader_input_wrp">
                <input name="idCardPhoto" type="hidden" id="media_ids_input"/>
                <!--<input name="icFrontImg" type="hidden" id="media_ids_input"/>-->
                <!--<input name="icBackImg" type="hidden" id="media_ids_input"/>-->
                <input class="weui_uploader_input" type="button" id="imageUpload"/>
            </div>
        </div>
    </div>
    <div class="weui_cells weui_cells_form" style="text-align: center;width: 100%;position: fixed;bottom: 0">
        <a id="submit" href="javascript:submitData();" class="weui_btn weui_btn_warn submit-btn">提交</a>
    </div>
</form>
<% include common/footer.ejs %>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    "use strict";
//    alert(location.href.split('#')[0]);
    wx.config({
        debug: false,
        appId: "<%= data.appId %>", // 必填，公众号的唯一标识
        timestamp: "<%= data.timestamp %>",
        nonceStr: "<%= data.nonceStr %>",
        signature: "<%= data.signature %>",
        jsApiList: [  // 必填，需要使用的JS接口列表
            "chooseImage",
            "previewImage",
            "uploadImage",
            "downloadImage",
            "getLocalImgData"
        ]
    });

        wx.ready(function () {
            $('#weui_uploader_files').click(function (e) {
                let image_files = $(this).children('.weui_uploader_file');
                if (image_files.length > 0) {
                    let urls = [];
                    image_files.each(function (i, li) {
                        urls.push($(li).attr('imgSrc'));
                    })
                    wx.previewImage({
                        current: $(e.target).attr('imgSrc'), // 当前显示图片的http链接
                        urls: urls // 需要预览的图片http链接列表
                    });
                }
            });
        $('#imageUpload').click(function () {
            let total, panel = $('#weui_uploader_files');
            total = panel.children('.weui_uploader_file').length;
            wx.chooseImage({
                count: 5 - total, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    if (localIds && localIds.length > 0) {
                        localIds.forEach(function (localId) {
                            wx.uploadImage({
                                localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                                isShowProgressTips: 1, // 默认为1，显示进度提示
                                success: function (res) {
                                    let serverId = res.serverId; // 返回图片的服务器端ID
                                    if (serverId) {
                                        Dolphin.ajax({
                                            url: '<%= global.config.contextPath == '/' ? '' : global.config.contextPath %>/wexin/downloadImage?catalog=idCard&mediaId=' + serverId,
                                            type: Dolphin.requestMethod.GET,
                                            forceUrl: true,
                                            onSuccess: function (reData) {
                                                let value = $('#media_ids_input').val();
                                                if (value.length != 0) {
                                                    value += ',';
                                                }
                                                $('#media_ids_input').val(value + serverId);
                                                //http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=?&media_id=?

                                                if (window.__wxjs_is_wkwebview) {
                                                    wx.getLocalImgData({
                                                        localId: localId, // 图片的localID
                                                        success: function (res) {
                                                            var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                                            localData = localData.replace('jgp', 'jpeg');
                                                            $('<li>')
                                                                .addClass('weui_uploader_file')
                                                                .attr('imgSrc', localId)
                                                                .css('background-image', 'url(' + localData + ')')
                                                                //.attr('src','data:image/jpeg;base64,'+localData)
                                                                //.css('background-image', 'url(' + localId + ')')
                                                                .appendTo(panel);
                                                        }
                                                    });
                                                }else{
                                                    $('<li>')
                                                        .addClass('weui_uploader_file')
                                                        .attr('imgSrc', localId)
                                                        .css('background-image', 'url(' + localId + ')')
                                                        .appendTo(panel);
                                                }
                                                if (panel.children('.weui_uploader_file').length == 5) {
                                                    $('#imageUpload').hide();
                                                }
                                            }
                                        });
                                    }
                                }
                            });
                        })
                    }
                }
            });
        });
    });
    wx.error(function (res) {
        alert("微信配置出错");
    });


    function submitData() {
        let data = Dolphin.form.getValue('#editForm');
        Dolphin.ajax({
            url: '<%= global.config.contextPath=='/'?'': global.config.contextPath %>/api/c51e664ff2e3437bbf26d74b03f8ab60',
            type: Dolphin.requestMethod.POST,
            data: Dolphin.json2string(data),
            forceUrl: true,
            onSuccess: function (reData) {
                location.href = "account?openId=<%= userData.openid %>";
            }
        });
    }
</script>
</body>
</html>
